// 两个圆圈
import React, { useState } from "react";
import style from "@/style/component/common/twolaps.module.scss"
import CustCardHeader from "@/component/custCardHeader";
import { useContext } from "react";

import { color } from "echarts";

const TwoLaps = ({ itemWidth, hideHeader = false, height, data = [], title = "两个圆圈模块", hideBtn = false }) => {
    const colors = [
        { color: "rgb(140,95,244)", name: "生效中", value: "12%" },
        { color: "rgb(0,176,249)", name: "无效", value: "87%" },
        { color: "rgb(56,232,240)", name: "过期", value: "75%" },
        { color: "rgb(63,228,152)", name: "未知", value: "46%" },
        { color: "rgb(255,243,155)", name: "生效中", value: "12%" },
        { color: "rgb(236,140,86)", name: "无效", value: "87%" },
        { color: "rgb(233,30,99)", name: "过期", value: "75%" },
        { color: "#ff9800", name: "未知", value: "46%" },
        { color: "rgb(140,95,244)", name: "生效中", value: "12%" },
        { color: "rgb(0,176,249)", name: "无效", value: "87%" },
        { color: "rgb(56,232,240)", name: "过期", value: "75%" },
        { color: "rgb(63,228,152)", name: "未知", value: "46%" },
        { color: "rgb(140,95,244)", name: "生效中", value: "12%" },
        { color: "rgb(0,176,249)", name: "无效", value: "87%" },
        { color: "rgb(56,232,240)", name: "过期", value: "75%" },
        { color: "rgb(63,228,152)", name: "未知", value: "46%" },
    ]

    const getStyle = () => {
        if (itemWidth) {
            return {
                width: itemWidth + "px"
            }
        } else {
            return false
        }
    }
    return (
        <>
            <div className={style.card} style={{ height }}>
                <div className={style.card_center}>
                    {
                        hideHeader ? null : <CustCardHeader title={title} hideDateBtn={hideBtn} btn={["车险", "意外险", "财产险"]} />
                    }

                    <div className={style.info}>
                        {
                            data.map((item, index) => {
                                return (
                                    <>
                                        <div className={style.item} key={index}  >
                                            <div className={style.item_center} style={{ borderColor: item.color || colors[index].color }}>
                                                <div className={style.item_value} style={{ color: item.color || colors[index].color }}>{item.value}</div>
                                                <div className={style.item_text} style={{ color: item.color || colors[index].color }}>{item.name}</div>
                                            </div>
                                        </div>
                                    </>
                                )
                            })
                        }

                    </div>
                </div>
            </div>
        </>
    )
}
export default TwoLaps;